import React from 'react';
import { Balloon, Tag } from '@teamix/ui';

function AddTag(props) {
  const { additions } = props;
  return additions ? (
    <Balloon.Tooltip
      trigger={
        <Tag color="green" style={{ marginLeft: 8, marginRight: 0 }}>
          + {additions}
        </Tag>
      }
      align="t"
      text={`增加了 ${additions} 行`}
    />
  ) : null;
}

function DeleteTag(props) {
  const { deletions } = props;
  return deletions >= 0 ? (
    <Balloon.Tooltip
      trigger={
        <Tag color="red" style={{ marginLeft: 8, marginRight: 0 }}>
          - {deletions}
        </Tag>
      }
      align="t"
      text={`删除了 ${deletions} 行`}
    />
  ) : null;
}

function Index(props) {
  const { additions, deletions } = props;

  return (
    <>
      <AddTag additions={additions} />
      <DeleteTag deletions={deletions} />
    </>
  );
}
Index.AddTag = AddTag;
Index.DeleteTag = DeleteTag;
export default Index;
